  <script>
export default {
  data() {
    return {
      tableData: [
        {
          detail: "五一套餐优惠.....",
          date: "2016-05-02",
        },
        {
          detail: "六一儿童节优惠.....",
          date: "2016-05-04",
        },
        {
          detail: "国庆优惠套餐.....",
          date: "2016-05-01",
        },
        {
          detail: "元旦优惠套餐.....",
          date: "2016-05-03",
        },
      ],
    };
  },
};
</script>

<template>
  <el-row
    ><!-- 模块一 -->
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <div class="text-container">
          <div class="text-item">总预约次数</div>
          <div class="number-items text-line">12</div>
          <div class="text-item">学生总数</div>
          <div class="number-items text-line">10</div>
        </div>
        <div class="text-container">
          <div class="text-item">总接送次数</div>
          <div class="number-items text-line">12</div>
          <div class="text-item">司机总数</div>
          <div class="number-items text-line">6</div>
        </div>
        <div class="text-container">
          <div class="text-item">订单总额</div>
          <div class="number-item text-line">12</div>
          <div class="text-item">车辆总数</div>
          <div class="number-item text-line">11</div>
        </div>
        <div class="text-container">
          <div class="text-item">家长总数</div>
          <div class="number-item text-line">5</div>
          <div class="text-item">线路总数</div>
          <div class="number-item text-line">7</div>
        </div>
      </div>
    </el-col>
  </el-row>

  <div class="text-line" style="font-size: 24px">待处理事项：</div>
  <el-row :gutter="30"
    ><!-- 模块二 -->
    <el-col :span="8">
      <div class="grid2-content bg-purple-dark">
        <div class="text2-item text-line">待分配订单</div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid2-content bg-purple-dark">
        <div class="text2-item">今日接送</div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid2-content bg-purple-dark">
        <div class="text2-item">意见反馈</div>
      </div>
    </el-col>
  </el-row>
  <div class="text-line" style="font-size: 24px">公告：</div>
  <el-row>
    <!--     <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="detail" label="公告详细" width="1000">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    </el-table>
  </el-row>
</template>

<style>
.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /* 设置框框背景颜色 */
  background: white;
}
.grid-content {
  /* 设置1框框大小形状 */
  border-radius: 0px; /* 指定元素的边框圆角半径 */
  min-height: 400px; /* 指定元素的最小高度 */
  display: flex; /* 将元素设置为 Flexbox 布局模式，这样可以方便地控制元素内部子元素的排列方式 */
  flex-wrap: wrap; /* 指定 Flexbox 容器内的子元素在一行排列不下时，自动换行到下一行 */
  justify-content: space-between;
  justify-content: space-around; /* 子元素在两端留有空白并均匀分布 */
}
.text2-item {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 设置高度为100%以便垂直居中生效 */
  text-align: center; /* 文本水平居中 */
}

.grid2-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 150px; /* 设置高度 */
  width: 350px; /* 设置宽度 */
}

.text2-item {
  font-size: 20px; /* 设置字体大小 */
}

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.text-item {
  font-size: 25px; /* 调整文字大小 */
  margin-right: 10px; /* 调整文字之间的间距 */
}

.number-items {
  font-size: 50px; /* 调整数字大小 */
  margin-top: 10px; /* 调整数字与文字之间的间距 */
}
.text-line {
  white-space: pre-line; /* 保留换行符并进行换行 */
  line-height: 5; /* 设置行间距为 1.2 倍字体大小 */
}
.space {
  margin-right: 100px; /* 调整两个文字之间的空白间距 */
}
</style>
